<template>
  <view class="loginContainer">
    <view class="login-top">
      <view class="login-title">锅炉评级系统</view>
      <view class="user_img">
        <image
          class="img-user"
          src="/static/images/login_head.png"
          mode=""
        ></image>
      </view>
    </view>
    <view class="login-form">
      <!-- <view class="form-title"> 用户登录 </view> -->
      <form @submit="loginSubmit" class="form-main">
        <view class="form-section">
          <view class="section-title">账号:</view>
          <input
            style="font-size: 32rpx"
            name="userName"
            placeholder="请输入用户名"
            :value="userName"
          />
        </view>
        <view class="form-section mt20">
          <view class="section-title">密码:</view>
          <input
            style="font-size: 32rpx"
            name="password"
            type="password"
            placeholder="请输入密码"
            :value="password"
          />
        </view>
        <view class="login-submit">
          <button  class="btn btn-submit" hover-class="isHover" form-type="submit" type="primary">
            登录
          </button>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
import { userLogin } from '@/api/index.js';

export default {
  name: 'Login',
  data() {
    return {
      userName: '',
      password: '',
    };
  },
  methods: {
    /**登录**/
    async loginSubmit(e) {
      const data = e.detail.value;
      if (data.userName == '' || data.password == '') {
        uni.showToast({
          title: '账号或密码不能为空',
          icon: 'none',
        });
        return;
      }

      const res = await userLogin({ ...data, type: 1, loginType: 2 });
      const { dataMap, token, tokenSignList } = res;
      uni.setStorageSync('user_info', dataMap);
      uni.setStorageSync('token_key', tokenSignList[0].value);
      uni.switchTab({
        url: '/pages/index/index',
      });
    },
  },
};
</script>

<style lang="scss">
.loginContainer {
  width: 100%;
  height: 100vh;
  background: #fff;
  position: relative;
  .login-top {
    height: 25vh;
    display: flex;
    align-items: center;
    justify-content: center;
    // background-color: #4e6ef2;
    background-color: #246eff;
    position: relative;
    .login-title {
      font-size: 46rpx;
      letter-spacing: 2px;
      font-weight: bold;
      color: #fff;
    }
    .user_img {
      position: absolute;
      bottom: -78rpx;
      left: 50%;
      width: 164rpx;
      height: 164rpx;
      border-radius: 50%;
      overflow: hidden;
      transform: translateX(-50%);
      z-index: 1000;
      box-shadow: 0 1px 10px #2196f35c;
      .img-user {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .login-form {
    margin-top: 60rpx;
    padding: 30rpx 80rpx;
    overflow: auto;
    .form-title {
      color: #666;
      font-size: 32rpx;
      text-align: center;
      font-weight: bold;
      letter-spacing: 2px;
    }
    .form-main {
      margin-top: 12%;
      width: 100%;
      display: block;
    }
  }
}

.form-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: 50rpx;
  height: 75rpx;
  line-height: 75rpx;
  border-bottom: 2rpx solid #ddd;
  .section-title {
    width: 120rpx;
    color: #666;
    font-size: 32rpx;
    text-align: center;
  }
  input {
    height: 75rpx;
    line-height: 75rpx;
    padding: 0 20rpx;
    flex: 1;
  }
}

.login-submit {
  margin-top: 60rpx;
  width: 100%;
  button {
    width: 100%;
    background: #246eff;
	border-color: #246eff;
    color: #fff;
    border-radius: 12rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
.isHover {
	background: #246eff;
	border-color: #246eff;
}
</style>
